<template>
	<view class="">
		<img class="bg-img" src="https://dnsverify.pfmoto.com/appstatic/img/my/bg-img.jpg" alt="">
			<view class="card-list" v-for="(item,index) in list">
				<view class="card-head">
					<view class="head-left">
						<view class="head-left-l">
							<image class="avatar" src="" mode=""></image>
							<image class="avatar-bottom" src="https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_bottom.png" mode=""></image>
						</view>
						<view class="head-left-r">
							<view class="" style="display: flex;flex-direction: row;">
								<view v-if="item.wechatName==null || item.wechatName=='' || item.phone==undefined" class="">
									<view v-if="item.phone=='' || item.phone==null || item.phone==undefined" class="name">注销账号</view>
									<view v-else class="name">{{item.phone.substr(0, 3) + '*****' + item.phone.substr(8)}}</view>
								</view>
								<view v-else class="name">{{item.wechatName}}</view>
								<image style="width: 22px;height:16px;" src="" mode=""></image>
							</view>
							<view class="" style="display: flex;padding-top: 7px;">
								<u-icon name="checkmark" color="#EA5404" size="12"></u-icon>
								<view class="check">认证用户</view>
							</view>
						</view>
					</view>
					<view v-if="item.authorId!= loginId">
						<text 
							:class="item.isFocus?'gz active':'gz'"
							@click.stop="focusCommunity(item)">{{!item.isFocus?"关注":"已关注"}}
						</text>
					</view>
				</view>
				<view class="card-middle">
					<!-- 标题/内容 -->
					<!-- 动态 -->
					<view v-if="item.subType==1" class="middle-title">
						<rich-text :nodes="item.content"></rich-text>
					</view>
					<!-- 文章 -->
					<view v-if="item.subType!==1" class="middle-title">
						<rich-text :nodes="item.titleArticle"></rich-text>
					</view>
					
					<!-- 图片/视频 -->
					<!-- 动态 -->
						<!-- 图片 -->
					<view v-if="item.subType==1 && item.typeTrend==1 && item.imgList.length>0" class="media-wraper">
						<view :class="(item.imgList.length === 1 ? '': 'img-box') +  ' img-box' + item.imgList.length">
							<view class='img-item' v-for='(img_item, index) in item.imgList' :key='index'>
								<image 
									@click.stop="previewImage(item.imgList,index)" 
									:src="img_item+'?x-amz-process=image/resize,w_750/quality,Q_80'" 
									mode="aspectFill">
								</image>
							</view>
						</view>
					</view>
						<!-- 视频 -->
					<view v-if="item.subType==1 && item.typeTrend==2" class="media-wraper" @click.stop="preventItemClick($event)" style="width: 700rpx;height: 402rpx;margin-bottom: 20rpx;position: relative;">
						<r-video 
							:autoplay="false" 
							:loop="true" 
							style="width: 700rpx;height: 402rpx;" 
							:src="item.imgList[0]">
						</r-video>
					</view>
					<!-- 文章 -->
						<!-- 图片 -->
					<view v-if="item.subType!==1 && item.webpublishCoverArticle" class="media-wraper">
						<image 
							@click.stop="previewArtivceImage(item.webpublishCoverArticle)" 
							:src="item.webpublishCoverArticle" 
							mode="aspectFill">
						</image>
					</view>
					
					<!-- 话题 -->
					<view class="topic" v-if="item.topicList.length">
						<view class="topic-item" v-for="(item,index) in item.topicList" @click.stop="enternTopicDetail(item)" :key="index">
							<image 
								src="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png"
								mode="aspectFill">
							</image>
							<text>{{item.topicName||""}}</text>
						</view>
					</view>
					<!-- 最热评论 -->
					<view class="compent" v-if="item.comment">
						<text class='compent-user' v-if="item.comment.wechatName==''||item.comment.wechatName==null">
							<text v-if="item.comment.phone==null||item.comment.phone==undefined">
								已注销用户:
							</text>
							<text v-else>
								{{item.comment.phone.substr(0, 3) + '*****' + item.comment.phone.substr(8)}}:
							</text>
						</text>
						<text class='compent-user' v-else>{{item.comment.wechatName}}: </text>
						<text class="compent-content">{{item.comment.content}}</text>
					</view>
					<!-- 操作 -->
					<view class="user-action">
						<text>{{item.createTime | timeFrom}}</text>
						<view class="action-wraper">
							<!-- 浏览 -->
							<image 
								style="width: 29rpx;height: 24rpx;"
								src="https://dnsverify.pfmoto.com/appstatic/community/ac-3.png" 
								mode="aspectFill">
							</image>
							<text>{{item.viewsNum||'0'}}</text>
							<!-- 点赞 -->
							<image 
								v-if="item.isThumbs" 
								style="width: 30rpx;height: 28rpx;" 
								@click.stop="thumbCommuntyTouched(item)"
								src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
								mode="aspectFill">
							</image>
							<image 
								v-else 
								style="width: 30rpx;height: 28rpx;" 
								@click.stop="thumbCommuntyTouched(item)" 
								src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png" 
								mode="aspectFill">
							</image>
							<text @click.stop="thumbCommuntyTouched(item)">{{item.thumbsNum||'0'}}</text>
							<!-- 评论 -->
							<image 
								style="width: 28rpx;height: 26rpx;" 
								@click.stop="openComent(item)"
								src="https://dnsverify.pfmoto.com/appstatic/community/ac-2.png" 
								mode="aspectFill">
							</image>
							<text @click.stop="openComent(item)">{{item.commentNum||'0'}}</text>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	export default{
		props:{
			list:{
				type:Array,
				default: () => {
					return []
				}
			}
		},
		components: {},
		data(){
			return {
				loginId:'111',
			}
		},
		methods:{
			
			/**
			 * 关注和取消关注
			 */
			focusCommunity(item){
				var that=this
				if(item.isFocus){//关注了
					var uri=app.globalData.config.interfaces.URI_COMMUNITY_FOCUS_CANCEL;
					var params = {
						"fanId": app.getUserId(),
						"authorId": item.authorId,
					};
					network.post(uri, params, 'json').then(res => {
						if(res.code==200){
							that.list.map(v => {
								if (v.authorId == item.authorId) {
									v.isFocus=false;
								}
							})
						}else{
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					})
				}else{//没关注
					var uri = app.globalData.config.interfaces.URI_COMMUNITY_FOCUS;
					var params = {
						"fanId": app.getUserId(),
						"authorId": item.authorId,
					};
					network.post(uri, params, 'json').then(res => {
						if(res.code==200){
							that.list.map(v => {
								if (v.authorId == item.authorId) {
									v.isFocus=true;
								}
							})
						}else{
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					})
				}	
			},
			/**
			 * 进入话题
			 */
			enternTopicDetail(item){
				uni.navigateTo({
					url: '/module_community/pages/topic/detail/detail?id=' + item.id,
					fail(err) {
						console.log(err, 'err')
					}
				});
			},
			/**
			 * 打开评论
			 */
			openComent(item){
				
			},
			/**
			 * 点赞/取消点赞
			 */
			thumbCommuntyTouched(item){
				var that=this
				if(util.isLogin(getApp())){
					var thumbsFlag
					item.isThumbs == 0 ? thumbsFlag = 1 : thumbsFlag = 0
					var uri=app.globalData.config.interfaces.URL_COMMUNTIY_THUMB;
					var params={
						"id": item.id,
						"loginId": app.getUserId(),
						"isfrom": 2,
						"thumbsFlag": thumbsFlag
					}
					network.post(uri,params,'form').then(res=>{
						if(res.code==200){
							item.thumbsNum = item.thumbsNum + (!item.isThumbs ? 1 : -1);
							item.isThumbs = !item.isThumbs;
						}else{
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					}).catch()
				}else{
					util.jumpLogin(this.from)
				}
			},
			/** 
			 * 动态图片预览
			 */
			previewImage: function(list, index) {
				var imgList = JSON.parse(JSON.stringify(list))
				let imageConfig = '?x-oss-process=image/resize,m_lfit,w_700'
				for (let i = 0; i < imgList.length; i++) {
					imgList[i] = imgList[i] + imageConfig
				}
				// var current = e.target.dataset.src;
				// var items = e.target.dataset.items;
				//#ifndef MP-WEIXIN
				wx.previewImage({
					current: index,
					urls: imgList,
				});
				//#endif
			
				uni.previewImage({
					current: index,
					urls: imgList,
				});
			},
			/**
			 * 文章富文本图片预览
			 */
			previewArtivceImage(img) {
				//#ifndef MP-WEIXIN
				wx.previewImage({
					current: 0,
					urls: [img],
				});
				//#endif
			
				uni.previewImage({
					current: 0,
					urls: [img]
				});
			},
		}
	}
</script>

<style>
	.bg-img {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.card-list {
		padding: 16px 16px 16px 16px;
	}
	.card-head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.head-left {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.head-left-l {
		
	}
	.check {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 10px;
		line-height: 14px;
		display: flex;
		align-items: center;
		color: #ADB0AE;
	}
	.head-left-r {
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		
	}
	.name {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
	
	}
	.avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background-color: black;
	}
	.avatar-bottom {
		width: 14px;
		height:14px;
		left: -14px;
	}
	.gz {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 52rpx;
		display: inline-block;
		width: 112rpx;
		height: 50rpx;
	
		text-align: center;
		border: 2rpx solid #EA5404;
		border-radius: 4rpx;
		color: #EA5404;
	
	}
	
	.active {
		border: 2rpx solid #ADB0AE;
	
		color: #ADB0AE;
	}
	.card-middle {
		width: 100%;
		display: row;
		flex-direction: column;
	}
	.middle-title rich-text {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 28rpx;
		width: 100%;
		line-height: 40rpx;
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/*设置方向*/
		-webkit-line-clamp: 1;
		/*设置超过为省略号的行数*/
		overflow: hidden;
		word-break: break-all;
		margin-top: 20px;
	}
	.topic {
		display: flex;
		margin-top: 30rpx;
		flex-wrap: wrap;
	}
	.topic image {
		width: 24rpx;
		height: 24rpx;
	}
	.topic-item {
	
		background: rgba(234, 84, 4, 0.1);
		border-radius: 4rpx;
		display: inline;
		padding: 4rpx 16rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.topic-item text {
		color: #EA5404;
		padding-left: 10rpx;
		font-size: 20rpx;
		line-height: 28rpx;
	}
	.compent {
		width: calc(100% - 40rpx);
		margin: 16rpx auto;
		
		background-color: #ededed;
		padding: 20rpx;
	}
	.compent-user {
		color: #ADB0AE;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		padding-right: 6rpx;
	}
	.compent-content {
		font-size: 24rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		line-height: 34rpx;
		text-align: justify;
		color: #000000;
		word-break: break-all;
	}
	.user-action {
		display: flex;
		justify-content: space-between;
	}
	.user-action image {
		width: 32rpx;
		height: 32rpx;
	}
	
	.user-action text {
		font-size: 24rpx;
		color: #ADB0AE;
		margin-right: 16rpx;
	
		margin-left: 4rpx;
		position: relative;
		top: 2rpx;
		margin-right: 20rpx;
	}
	.action-wraper {
		display: flex;
		align-items: center;
	}
	.media-wraper {
		margin: 40rpx 0;
		margin-bottom: 20rpx;
	}
	
	.media-wraper image {
		width: 100%;
		border-radius: 8rpx;
	}
	/* grid & flex */
	.media-wraper .img-box1 .img-item {
		width: 100%;
	}
	.media-wraper .img-box1 .img-item image {
		width: 100%;
	}
	.media-wraper .img-box2 {
		display: grid;
		grid-gap: 20rpx;
		grid-template-columns: calc(50% - 10rpx) calc(50% - 10rpx);
		height: calc(50vw - 80rpx);
		overflow: hidden;
	}
	.media-wraper .img-box3 {
		display: grid;
		grid-gap: 20rpx;
		grid-template-columns: calc(66.6% - 10rpx) calc(33.3% - 10rpx);
		grid-template-rows: calc(33.3vw - 10rpx) calc(33.3vw - 10rpx);
	}
	
	.media-wraper .img-box3 .img-item:first-child {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
	}
	.media-wraper .img-box4 {
		display: grid;
		grid-gap: 20rpx;
		grid-template-columns: calc(50% - 10rpx) calc(50% - 10rpx);
		grid-template-rows: calc(50VW - 40rpx) calc(50VW - 40rpx);
	}
	.media-wraper .img-box5 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.media-wraper .img-box5 .img-item:nth-child(-n+3) {
		width: calc(33.3vw - 40rpx);
		height: calc(33.3vw - 40rpx);
	}
	.media-wraper .img-box5 .img-item:nth-child(n+4) {
		margin-top: 24rpx;
		width: calc(50vw - 48rpx);
		height: calc(50vw - 48rpx);
	}
	.media-wraper .img-box6 {
		display: grid;
		grid-gap: 20rpx;
		grid-template-columns: calc(33.3% - 10rpx) calc(33.3% - 10rpx) calc(33.3% - 10rpx);
		grid-template-rows: calc(33.3vw - 10rpx) calc(33.3vw - 10rpx) calc(33.3vw - 10rpx);
	}
	.media-wraper .img-box6 .img-item:first-child {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}
	.media-wraper .img-box7 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.media-wraper .img-box7 .img-item:nth-child(n+3) {
		margin-top: 24rpx;
		width: calc(33.3vw - 40rpx);
		height: calc(33.3vw - 40rpx);
	}
	.media-wraper .img-box7 .img-item:nth-child(-n+2),
	.media-wraper .img-box7 .img-item:nth-last-child(2),
	.media-wraper .img-box7 .img-item:last-child {
		width: calc(50vw - 48rpx);
		height: calc(50vw - 48rpx);
	}
	.media-wraper .img-box8 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.media-wraper .img-box8 .img-item:nth-child(n+3),
	.media-wraper .img-box8 .img-item:nth-child(-n+3) {
		width: calc(33.3vw - 40rpx);
		height: calc(33.3vw - 40rpx);
	}
	.media-wraper .img-box8 .img-item:nth-last-child(3),
	.media-wraper .img-box8 .img-item:nth-last-child(2),
	.media-wraper .img-box8 .img-item:nth-last-child(1) {
		margin-top: 24rpx;
	}
	.media-wraper .img-box8 .img-item:nth-child(4),
	.media-wraper .img-box8 .img-item:nth-child(5) {
		margin-top: 24rpx;
		width: calc(50vw - 48rpx);
		height: calc(50vw - 48rpx);
	}
	.media-wraper .img-box9 {
		display: grid;
		grid-gap: 20rpx;
		grid-template-columns: calc(33.3vw - 40rpx) calc(33.3vw - 40rpx) calc(33.3vw - 40rpx);
		grid-template-rows: calc(33.3vw - 40rpx) calc(33.3vw - 40rpx) calc(33.3vw - 40rpx);
	}
	.media-wraper .img-box .img-item {
		width: 100%;
	}
	.media-wraper .img-box .img-item image {
		width: 100%;
		height: 100%;
	}
</style>